<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView Different Columns" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h3>Supplier Information</h3>
    <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" 
    CellSpacing="0" CellPadding="3" DataKeyName="ID"  RowCommandEvent="onRowCommand">
       <AlternatingRowStyle CssClass="AlternatingRowStyle" />
       <RowStyle CssClass="RowStyle"/>
       <HeaderStyle CssClass="HeaderStyle"/>
       <SelectedRowStyle CssClass="SelectedRowStyle" />
       <Columns>
        <AjaxData:GridViewCommandColumn 
                                ShowSelectButton="true"
                                SelectButtonType="CheckBox"
                                ShowSelectAllButton="true"  />
        <AjaxData:GridViewRadioButtonColumn GroupName="Active"/>
        <AjaxData:GridViewCheckBoxColumn DataField="Active"/>
        <AjaxData:GridViewButtonColumn CommandName="ShowInfo" HeaderText="Company" DataTextField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewHyperLinkColumn HeaderText="City" DataTextField="City" DataNavigateUrlFields="City" Target="_blank" DataNavigateUrlFormatString="Related.aspx?City={0}" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
       </Columns>
    </AjaxData:GridView>

    <br />
    <div id="divEvents" class="trace"></div>

    <script type="text/javascript">

        function pageLoad(sender, e) {
            DataService.GetAllSupplier(onLoadSuccess);
        }

        function onLoadSuccess(result) {
            var gridView = GridView1;

            gridView.set_dataSource(result);
            gridView.dataBind();
        }

        function onSelectedIndexChanged(sender, e) {
            writeMessage(String.format('{1} value {0}<br/>', sender.get_dataKeys()[e.get_row().get_rowIndex()], (e.get_row().get_isSelected()) ? "Selected" : "Unselected"));
        }

        function onRowCommand(sender, e) {
            if (e.get_commandName() == 'ShowInfo') {
                writeMessage(String.format('Command Arument {0}<br/>', e.get_commandArgument()));
            }
        }

        function writeMessage(message) {
            $get('divEvents').innerHTML += message;
        }

    </script>

</asp:Content>